<template>
  <div class="f_c" style="width:100%">
    <div class="content">
      <div :style="{ width: item.percentage + '%' }">
        <div v-if="item.tagShow">{{ item.percentage }}%</div>
      </div>
    </div>
    <div class="color_8e3 mt-13 f_r_sb_c font-18 text" v-if="textShow">
      <span v-if="pageBargain == '0'">限量{{ item.max_num }}份</span>
      <span
      v-if="pageBargain == '1' && item.type <1"
        ><van-count-down
          class="font-24"
          style="color:#EA4237"
          :time="time * 1000"
      /></span>
      <span class="" v-if="!item.status"
        >已抢{{ item.num }}件</span
      >
      <span
        class=""
        v-if="item.status == 1 || item.status == 2 || item.status == 4"
        >已砍完</span
      >
      <span class="" v-if="item.status == 3">已失效</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    textShow: {
      type: Boolean,
      default: false,
    },
    time: {
      type: Number,
      default: 0,
    },
        pageBargain: {
      type: String,
      default: "",
    },
    item: {
      type: Object,
      default: {},
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 14px;
  background: #ffd2d2;
  border-radius: 7px;
  position: relative;
  // overflow: hidden;
  > div {
    position: absolute;
    left: 0%;
    top: 0;
    height: 100%;
    background: linear-gradient(-87deg, #ff724e 0%, #ff3d52 100%);
    border-radius: 7px;
    > div {
      padding: 5px 10px;
      background: #ff6600;
      border-radius: 15px 15px 15px 0px;
      border: 2px solid #ffdcc4;
      position: absolute;
      top: -36px;
      right: -66px;
      color: #fff;
    }
  }
}
.color_8e3 {
  color: #8e3f3f;
}
.text {
  width: 264px;
}
</style>
